<template>
  <div class="login-container animated-background">
    <!-- SVG滤镜库 -->
    <svg style="display: none">
      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />
        <feComponentTransfer in="turbulence" result="mapped">
          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
        </feComponentTransfer>
        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">
          <fePointLight x="-200" y="-200" z="300" />
        </feSpecularLighting>
        <feComposite in="specLight" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </svg>

    <!-- 登录卡片 -->
    <div
        class="glass-component login-card"
        ref="tiltCard"

        @mouseleave="handleMouseLeave"
    >
      <!--      @mousemove="handleMouseMove"-->
      <div class="glass-effect"></div>
      <div class="glass-tint"></div>
      <div class="glass-shine"></div>
      <div class="glass-content">
        <h2 class="login-title">铅山县生态产品价值转化支撑平台</h2>
        <form class="login-form" @submit.prevent="login">
          <div class="form-group">
            <div class="input-wrapper">
              <el-icon name="User" class="input-icon"><User /></el-icon>
              <input
                v-model="username"
                type="text"
                placeholder="用户名"
                class="glass-input with-icon"
                autocomplete="username"
              />
            </div>
          </div>

          <div class="form-group">
            <div class="input-wrapper position-relative">
              <el-icon name="Lock" class="input-icon"><Lock /></el-icon>
              <input
                v-model="password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="密码"
                class="glass-input with-icon"
                autocomplete="current-password"
              />
              <el-icon
                name="View"
                class="toggle-password-icon"
                @click="togglePasswordVisibility"
              >
                <component :is="showPassword ? View : HideEye" />
              </el-icon>
            </div>
          </div>

          <button type="submit" class="glass-button" :disabled="!username || !password">登 录</button>
        </form>
        <!-- 错误提示 -->
        <!--        <p v-if="message" style="color: red; text-align: center;">{{ message }}</p>-->

      </div>



    </div>

    <div class="login-tips">
      <p>默认管理员账号：admin / admin123</p>
      <div class="login-footer">
        <span>还没有账号？</span>
        <el-button link @click="goToRegister">去注册</el-button>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import {User, Lock, Hide as HideEye, View} from '@element-plus/icons-vue'

import {useLoginStore} from "@/stores/login";
const loginStore = useLoginStore();

// 表单数据
const username = ref<string>('')
const password = ref<string>('')
const message = ref<string>('')
const showPassword = ref<boolean>(false)
const router = useRouter()

// 切换密码显示/隐藏
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 登录方法
const login = async () => {
  if (!username.value || !password.value) {
    message.value = '用户名和密码不能为空'
    ElMessage.error(message.value)
    return
  }

  try {
    const response = await axios.post('/api/auth/login', {
      username: username.value,
      password: password.value
    })

    const token = response.data.access_token
    localStorage.setItem('token', token)

    ElMessage.success('登录成功')
    loginStore.username = username.value
    await router.push('/homepage')
  } catch (error: any) {
    if (error.response && error.response.status === 401) {
      message.value = error.response?.data?.message || '登录失败，请重试'
    } else {
      message.value = '网络异常，请检查连接'
    }
    ElMessage.error(message.value)
  }
}

// 卡片悬停旋转效果
const tiltCard = ref<HTMLElement | null>(null)

// const handleMouseMove = (e: MouseEvent) => {
//   const card = tiltCard.value
//   if (!card) return
//
//   const rect = card.getBoundingClientRect()
//   const x = e.clientX - rect.left
//   const y = e.clientY - rect.top
//   const centerX = rect.width / 2
//   const centerY = rect.height / 2
//   const maxTilt = 18
//
//   const rotateY = ((x - centerX) / centerX) * maxTilt
//   const rotateX = -((y - centerY) / centerY) * maxTilt
//
//   card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`
// }

const handleMouseLeave = () => {
  const card = tiltCard.value
  if (!card) return

  card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}

</script>


<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.animated-background {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/yanshan_login_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-card {
  width: 600px;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);
  cursor: pointer;
  background: transparent;
}

.input-wrapper {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(31, 46, 45);
  font-size: 18px;
  z-index: 1;
}

.glass-input.with-icon {
  padding-left: 45px;
}

.toggle-password-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;

  &:hover {
    color: #fff;
  }
}


.glass-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(5px);
  filter: url(#glass-distortion);
  isolation: isolate;
  border-radius: 24px;
}

.glass-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 24px;
}

.glass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  box-shadow:
      inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),
      inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.glass-content {
  position: relative;
  z-index: 3;
  padding: 2rem;
  color: white;
}

.login-title {
  text-align: center;
  color: #fff;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  letter-spacing: 4px; // 字间距

  width: 550px;
}

.form-group {
  margin-bottom: 1.5rem;
}

.glass-input {
  width: 90%;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;

  &::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }

  &:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  }
}

.glass-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }
}

// 添加点击波纹效果
.click-gradient {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(180,180,255,0.2) 40%, rgba(100,100,255,0.1) 70%, rgba(50,50,255,0) 100%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.glass-component.clicked .click-gradient {
  animation: gradient-ripple 0.6s ease-out;
}

@keyframes gradient-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.glass-component {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.login-tips {
  text-align: center;
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

.login-tips p {
  margin: 5px 0;
}

.login-footer {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.login-footer .el-button {
  margin-left: 5px;
  color: #409eff;
}

.login-footer .el-button:hover {
  color: #66b1ff;
}

</style>

